<template>
	<view class="personal">
		<form bindsubmit="submit">
			
		  <view class="page">
				<view class="page-title">头像</view>
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				  <image class="avatar" :src="avatarUrl"></image>
				</button>
			</view>
			
			<u-line></u-line>
						
			<view class="page">
				<view class="page-title">昵称</view>
				<input type="nickname" placeholder="请输入昵称" class="nickname" v-model="nickname" @change="bindblur" @input="bindblur">
			</view>
			
			<u-line></u-line>
			
			<view class="btn" @click="handleBtnSave">确认</view>
			
		</form>
	</view>
</template>

<script>
	import { uploadFile, setUserInfo } from '@/service/api.js'
	import funUtils from '@/utils/fun.js'
	export default {
		data() {
			return {
				avatarUrl: "",
				nickname: "",
				id: ""
			}
		},
		onLoad() {
			this.id = uni.getStorageSync("userInfo").id;
			this.nickname = uni.getStorageSync("userInfo").nickname;
			
			if(uni.getStorageSync("userInfo").headUrl != "微信头像") {
				this.avatarUrl = uni.getStorageSync("userInfo").headUrl;
			} else {
				this.avatarUrl = "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0"			
				}
		},
		methods: {
			bindblur(e) {
				console.log(e)
				this.nickname = e.detail.value;
			},
			onChooseAvatar(e) {
				const url = e.detail.avatarUrl;
				this.avatarUrl = url;
			},
			handleBtnSave() {
				funUtils.setUserAvatarAndNickname({
					headUrl: this.avatarUrl,
					nickname: this.nickname,
					id: this.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.personal {
	padding: 0 20rpx;
	.page {
		height: 80rpx;
		margin: 10rpx 0;
		line-height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.page-title {
			font-size: 28rpx;
		}
		.avatar-wrapper {
			border: none;
			width: 80rpx;
			height: 80rpx;
			margin: 0;
			padding: 0;
			image {
				width: 100%;
				height: 100%;
			}
		}
		
		.nickname {
			text-align: right;
		}
	}
	
	.btn {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 40rpx;
		color: #fff;
		margin-top: 40rpx;
		background-color: pink;
	}
}
</style>
